<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>角色管理</title>
</head>
<body>
	<button class="layui-btn bt_add">添加</button>
	<button class="layui-btn layui-btn-warm bt_update">修改</button>
	<button class="layui-btn layui-btn-danger bt_delete">删除</button>
	<div class="demoTable" style="margin-top: 10px;">
		角色名：
		<div class="layui-inline">
			<input class="layui-input" name="rolename" id="demoReload"
				autocomplete="off">
		</div>
		<button class="layui-btn search" data-type="reload">搜索</button>
		<button class="layui-btn reset layui-btn-primary" data-type="reset">重置</button>
	</div>
	<table id="demo" lay-filter="test"></table>
	<script type="text/javascript">
		layui.use('table', function() {
			var table = layui.table;
			var $ = layui.$;

			//第一个实例
			table.render({
				elem : '#demo',
				toolbar: true,
				url : '${ctx}/role/page' //数据接口
				,page : true //开启分页
				,cols : [ [ //表头
            	{type: 'checkbox', fixed: 'left'},            
				{
					field : 'id',
					title : 'ID',
					sort : true,
					fixed : 'left'
				}, {
					field : 'rolename',
					title : '角色名'
				}, {
					field : 'note',
					title : '备注'
				}, {
					field : 'creationTime',
					title : '创建时间'
				}, {
					field : 'creationUser',
					title : '创建者'
				}, {
					field : 'updateTime',
					title : '修改时间'
				}, {
					field : 'updateUser',
					title : '修改者'
				} ] ]
			});
			//添加
			$('.bt_add').click(function (){
				layer.open({
				      type: 2,
				      title: '添加',
				      shadeClose: true,
				      shade: false,
				      maxmin: true, //开启最大化最小化按钮
				      area: ['893px', '600px'],
				      content: '${ctx}/role/addshow'
			    });
			})
			
			//修改
			$('.bt_update').click(function (){
				var checkStatus = table.checkStatus('demo');
				if (checkStatus.data.length==0) {
					layer.msg('至少选择一条数据', {icon: 2})
					return false;
				}
				
				if (checkStatus.data.length>1) {
					layer.msg('至多只能选择一条数据', {icon: 2})
					return false;
				}
				
				var data = $.param(checkStatus.data[0]);
				
				layer.open({
				      type: 2,
				      title: '修改',
				      shadeClose: true,
				      shade: false,
				      maxmin: true, //开启最大化最小化按钮
				      area: ['893px', '600px'],
				      content: '${ctx}/role/role_updatePage?'+data
			    });
			})	
			
			//删除
			$('.bt_delete').click(function (){
				var checkStatus = table.checkStatus('demo');
				if (checkStatus.data.length==0) {
					layer.msg('至少选择一条数据', {icon: 2})
					return false;
				}
				
				var ids = new Array();
				for (var i=0; i<checkStatus.data.length; i++) {
					ids.push(checkStatus.data[i].id);
				}
				
				$.ajax({
				    type: "POST",
				    url: '${ctx}/role/delete',
				    contentType : "application/json",
				    dataType: 'json',  
				    data: JSON.stringify(ids),  
				    success: function(e){
				    	if (e == "") {
							layui.table.reload("demo", {
								page: {
						            curr: 1 //重新从第 1 页开始
					          	}
							});
							layer.msg('删除成功', {icon: 1});		//高用父窗口中的layer来提示，这样关闭弹出窗后提示不会立马关闭
						} else {
							layer.msg('删除失败', {icon: 2});
						}
				    },  
				    error: function(res){
				    	layer.msg("未知异常", {icon: 2});
				    }  
				});
				
			})
			
			//搜索
			$('.demoTable .search').click(function (){
				table.reload('demo', {
			        page: {
			            curr: 1 //重新从第 1 页开始
		          	}
		          	,where: {
		              	username: $('[name="rolename"]').val(),
			        }
		        })
			})
			
			//重置
			$('.demoTable .reset').click(function (){
				$('[name="rolename"]').val("");
				$('.demoTable .search').click();
			})
		});
	</script>
</body>
</html>